<!--
 * @Author: toString muzi_li0323@163.com
 * @Date: 2024-05-22 20:22:04
 * @LastEditors: toString muzi_li0323@163.com
 * @LastEditTime: 2024-05-23 19:58:24
 * @FilePath: token-for-token-front-admin/src/views/login/index.vue
 * @Description: Login
-->
<template>
  <div class="container block login">
    <div class="main">
      <div class="headerBar">{{ t('global.Login') }}</div>

      <el-form :model="forms" ref="ruleRef" label-width="auto" :rules="rules" label-position="top">
        <el-form-item  prop="username" style="width: 100%;margin: .3rem 0 .5rem 0 ">
          <el-input v-model.trim="forms.username" :placeholder="t('global.PleaseInputUserName')" style="border-radius: 30px"/>
        </el-form-item>
        <el-form-item  prop="password" style="width: 100%;margin: .3rem 0 .5rem 0 ">
          <el-input v-model.trim="forms.password" type="password" :placeholder="t('global.PleaseInputPassWord')" @keyup.enter="handleEnter"/>
        </el-form-item>
        <el-form-item style="width: 100%">
          <el-button type="primary" @click="submit" :loading="loading" >{{ t('home.Login') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {reactive, ref} from 'vue'
import {useRouter} from 'vue-router';
import {useUserStore} from "@/stores";
import {ElMessage} from "element-plus";
import { login } from '@/require/api.js'
import {useI18n} from "vue-i18n";
const {t} = useI18n();

const footerType = ref('login')
const loading = ref(false)
const locationHref = ref('');
locationHref.value = window.location.href;
const router = useRouter();
const userStore = useUserStore();
const ruleRef = ref(null);


const rules = reactive({
  username: [{required: true, message: t('message.UserNameIsNull'), trigger: 'blur'}],
  password: [
    {required: true, message: t('message.PWDIsNull'), trigger: 'blur'},
    {min: 8, max: 16, message: t('message.PWDLength'), trigger: 'blur'},
    {
      pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,16}$/,
      message: t('message.PWDAa09'), trigger: 'blur'
    }
  ],
})


const forms = reactive({
  username: '',
  password: '',
})


// 登录方法
async function submit() {
  try {
    loading.value = true;
    if (forms.username === "" || forms.password === "") {
      ElMessage.error(t("message.InputAll"));
      return;
    }
    const {code, data, msg} = await login({
      username: forms.username,
      password: forms.password
    });
    if (code === 200) {
      console.log(data)
      ElMessage.success(t('message.LoginSuccess'))
      userStore.setToken(data.token);
      userStore.setUserInfo(data);
      userStore.setAddress(data.address)
      await router.push({ name: 'userwallet' });
    } else {
      ElMessage.error(msg);
    }
  }catch (e) {
    console.log(e)
  }finally {
    loading.value = false;
  }
}


// 在输入密码的 input 按下回车键
const handleEnter = () => {
  submit();
};
</script>

<style scoped lang="less">
//element plus样式 start
.el-form {
  :deep(.el-select__wrapper) {
    height: .42rem;
    border-radius: 8px;
  }

  :deep(.el-input) {
    height: .42rem;
  }

  :deep(.el-button) {
    background-color: #fe7300;
    border:none;
    width: 100%;
    height: .42rem;
    color: #fff;
  }
}

.example-showcase .el-dropdown + .el-dropdown {
  margin-left: 15px;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

//element plus样式 end

/****** 底部“简体中文按钮” ******/
.simpleChinese.is-text:not(.is-disabled):focus-visible {
  outline: none;
}

.login {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  //background: url(@/assets/images/login/loginBg.svg) 100% no-repeat;
  background-size: cover;
}

.main {
  width: 4rem;
  border: 1px solid #e5e5e5;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
  border-radius: 5px;
  padding: .3rem .2rem;
  box-sizing: border-box;

  .headerBar{
    font-size: .22rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: .2rem 0;
  }

  .el-form{
    width: 100%;
  }
}

</style>
